<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!--link rel="stylesheet" type="text/css" href="/styles/style.css" /-->
<script type="text/javascript" src="/scripts/script.js"></script>
<style type="text/css">

#map {
	position: fixed;
	left: 50%;
	top: 50%;
	width: 16px;
	height: 16px;
	margin: -8px;
	background-color: red;
}

#map .unit {
	position: absolute;
	width: 32px;
	height: 32px;
	mar gin: -16px;
	background-color: green;
}

</style>
<script type="text/javascript">

function createPlanet(id, name, x, y, z) {
	var p = document.createElement("div");
	p.className = "unit";
	p.id = id;
	p.x = x;
	p.y = y;
	p.z = z;

	var name = document.createElement("div");
	name.className = "name";
	name.appendChild(document.createTextNode(name));
	p.appendChild(name);

	var icon = document.createElement("img");
	icon.className = "icon";
	icon.src = "planet.png";
	icon.alt = name;
	p.appendChild(icon);

	return p;
}

var r = 0;
function update() {
	r += (2 * Math.PI / 360);

	var map = document.getElementById("map");
	for (var i = 0; i < map.childNodes.length; ++i) {
		updatePlanet(map.childNodes[i]);
	}

	var t = setTimeout(function() { update(); }, 10);
}
function updatePlanet(planet) {
	if (planet == null) return;
	if (planet.style == null) return;

	var ax = planet.x;
	var ay = planet.y;
	var az = planet.z;

	var cx = 100 * (Math.cos(r));
	var cy = 100 * (Math.sin(r));
	var cz = 100;

	var sigx = Math.PI/8;
	var sigy = 0;
	var sigz = 0;

	var ex = 0;
	var ey = 0;
	var ez = 100;

	var dx = Math.cos(sigy)*(Math.sin(sigz)*(ay-cy)+Math.cos(sigz)*(ax-cx))-Math.sin(sigy)*(az-cz);
	var dy = Math.sin(sigx)*(Math.cos(sigy)*(az-cz)+Math.sin(sigy)*(Math.sin(sigz)*(ay-cy)+Math.cos(sigz)*(ax-cx)))+Math.cos(sigx)*(Math.cos(sigz)*(ay-cy)-Math.sin(sigz)*(ax-cx));
	var dz = Math.cos(sigx)*(Math.cos(sigy)*(az-cz)+Math.sin(sigy)*(Math.sin(sigz)*(ay-cy)+Math.cos(sigz)*(ax-cx)))-Math.sin(sigx)*(Math.cos(sigz)*(ay-cy)-Math.sin(sigz)*(ax-cx));

	var bx = (dx - ex)*(ez / dz);
	var by = (dy - ey)*(ez / dz);

	planet.style.left = bx +"px";
	planet.style.top  = by +"px";
	planet.style.zLayer = dz;
}

function addNewUnit(id, name, x, y, z) {
	var map = document.getElementById("map");
	var unit = document.createElement("div");
	unit.id = id;
	unit.className = "unit";
	unit.x = x;
	unit.y = y;
	unit.z = z;
	unit.appendChild(document.createTextNode(name));
	map.appendChild(unit);
}

function addNewUnits() {
//	addNewUnit("a1", "A", 200,-200, 0);
//	addNewUnit("b1", "B",-200,-200, 0);
//	addNewUnit("c1", "C", 200, 200, 0);
//	addNewUnit("d1", "D",-200, 200, 0);

	for (var i = 0; i < 100; ++i) {
		var x = Math.random()*400-200;
		var y = Math.random()*400-200;
		var z = 0; //Math.random()*400-200;
		addNewUnit("x"+i, "X"+i, x, y, z);
	}

//	addNewUnit("a2", "A", 200,   0, 10);
//	addNewUnit("b2", "B",-200,   0, 10);
//	addNewUnit("c2", "C",   0, 200, 10);
//	addNewUnit("d2", "D",   0,-200, 10);
//
//	addNewUnit("a3", "A", 200,   0, 20);
//	addNewUnit("b3", "B",-200,   0, 20);
//	addNewUnit("c3", "C",   0, 200, 20);
//	addNewUnit("d3", "D",   0,-200, 20);
}

</script>
</head>
<body onload="addNewUnits(); update();">

<div id="map">
<div id="1" class="unit" x= 100 y=-100 z=0>w</div>
<div id="2" class="unit" x=-100 y=-100 z=0>x</div>
<div id="3" class="unit" x= 100 y= 100 z=0>y</div>
<div id="4" class="unit" x=-100 y= 100 z=0>z</div>
</div>

</body>
</html>
